<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 指令 v-on</title>
    </head>
    <body>
        <div id="descr">
            <p>
                v-on 用于绑定事件。
            </p>
        </div>
        <div id="app">
                <div id="example-1">
                    <button v-on:click="counter += 1">Add 1</button>
                    <p>The button above has been clicked {{ counter }} times.</p>
                </div>

                <p style="color:red">注意：</p>
                <p style="color:red">1. v-on 可以简写为 @ </p>
                <p style="color:red">2. v-on 可以结合事件修饰符一起使用。</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    counter: function() {
                        this.counter++;
                    }
                }
            })
        </script>
    </body>
</html>